<template>
    <div class="pay">
        <div class="pay_td">
            支付方式
        </div>
        <ul class="pay_com">
            <li @click="tabList(0)" :class="['pc_item',index == 0 ? 'active' :'']"><div class="type wei"><i></i>微信支付</div><div class="money">微信快捷支付</div></li>
            <li @click="tabList(1)" :class="['pc_item',index == 1 ? 'active' :'']"><div class="type ye" ><i></i>余额支付</div><div class="money">可用金额：{{now_money}}</div></li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            index:1,
        }
    },
    props:{
        now_money:{
            typeo:String
        }
    },
    methods:{
        tabList(i){
           
            this.index = i
            if(this.index == 1){
                this.$emit('share-pagtype',"yue")
            }else if(this.index == 0){
                this.$emit('share-pagtype',"weixin")
                }
        }
    }
}
</script>

<style lang="scss" scoped>
.pay{
    background-color: #fff;
    .pay_td{
        height: 48px;
        line-height: 48px;
        color: #282828;
        font-size: 15px;
        padding: 0 15px;
    }
    .pay_com{
        padding: 0 15px 10px;
        li{
            display: flex;
            align-items: center;
            height: 43px;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #eee;
            margin-bottom: 8px;
            font-size: 14px;
            >div{
                width: 50%;
                text-align: center;
                i{
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                    margin-right: 7px;
                }
            }
            .money{
                color: #aaaa;
            }
            .wei{
                border-right: 1px solid #eee;
                >i{
                    
                    background: url(../../../assets/icon/common/wei.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .ye{
                 border-right: 1px solid #eee;
                >i{
                    
                    background: url(../../../assets/icon/common/ye.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }

        li.active{
            border:1px solid #fc4141;
        }
    }
}
</style>

